<template>
  <div class="dashboard-container">
    <!-- 时间日期部分 -->
    <div class="time-section">
      <div class="time">{{ currentTime }}</div>
      <div class="date">{{ currentDate }}</div>
    </div>

    <!-- 天气信息部分 -->
    <div class="weather-section" v-if="weatherData">
      <div class="weather-main">
        <img :src="weatherIcon" class="weather-icon" />
        <span class="temperature">{{ weatherData.temp }}°C</span>
      </div>
      <div class="weather-details">
        <div class="location">{{ weatherData.city }}</div>
        <div class="description">{{ weatherData.weather }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      currentTime: '',
      currentDate: '',
      weatherData: null,
      API_KEY: "a02304f44c2a223d91b3ca3fdf5e1fe7", // 替换为实际API密钥
    };
  },
  mounted() {
    this.updateDateTime();
    setInterval(this.updateDateTime, 1000);
    this.fetchWeatherData();
  },
  computed: {
    weatherIcon() {
      return this.weatherData
        ? `https://openweathermap.org/img/wn/${this.weatherData.icon}@2x.png`
        : '';
    }
  },
  methods: {
    updateDateTime() {
      const now = new Date();
      this.currentTime = now.toLocaleTimeString('zh-CN', { hour12: false });
      this.currentDate = now.toLocaleDateString('zh-CN', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      });
    },
    async fetchWeatherData() {
      try {
        const response = await axios.get(
          `https://api.openweathermap.org/data/2.5/weather?q=1799962&units=metric&appid=${this.API_KEY}`
        );
        this.weatherData = {
          temp: Math.round(response.data.main.temp),
          weather: response.data.weather[0].main,
          city: response.data.name,
          icon: response.data.weather[0].icon
        };
        console.log('天气数据获取成功:', this.weatherData);
      } catch (error) {
        console.error('天气数据获取失败:', error);
      }
    }
  }
};
</script>

<style scoped>
.dashboard-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-family: 'Arial', sans-serif;
}

.time-section {
  text-align: center;
  margin-bottom: 2rem;
}

.time {
  font-size: 8rem;
  font-weight: 300;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.date {
  font-size: 2.5rem;
  opacity: 0.8;
}

.weather-section {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.weather-main {
  display: flex;
  align-items: center;
}

.weather-icon {
  width: 80px;
  height: 80px;
}

.temperature {
  font-size: 4rem;
  margin-left: 1rem;
}

.weather-details {
  text-align: left;
}

</style>
